<template>
  <div class="container">
    <el-card>
      <div class="header">
        <el-row :gutter="20">
          <el-form :inline="true" :model="articlequery" class="demo-form-inline">
            <el-form-item class="keyword" label="关键字">
              <el-input v-model="articlequery.keyword" placeholder="请输入关键字"></el-input>
            </el-form-item>
            <el-form-item class="status" label="状态">
              <el-select v-model="articlequery.state" placeholder="请选择状态">
                <el-option label="已启用" value="1"></el-option>
                <el-option label="已禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="clearlist">清除</el-button>
              <el-button type="primary" @click="getArticleList()">搜索</el-button>
              <el-button
                class="addskill"
                type="success"
                icon="el-icon-edit"
                @click="addDialogTableVisible = true"
              >新增技巧</el-button>
            </el-form-item>
          </el-form>
        </el-row>
      </div>
      <el-alert class="total" :title="'数据一共' + total + '条'" type="info" show-icon :closable="false"></el-alert>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="180px"></el-table-column>
        <el-table-column label="文章标题" width="500px">
          <template slot-scope="scope">
            <span>{{scope.row.title}}</span>
            <i
              class="el-icon-film"
              v-if="scope.row.videoURL"
              @click="handleVideo(scope.row.videoURL)"
            ></i>
          </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读人数"></el-table-column>
        <el-table-column prop="username" label="录入人"></el-table-column>
        <el-table-column label="录入时间">
          <template slot-scope="scope">{{scope.row.createTime | formdate }}</template>
        </el-table-column>
        <el-table-column prop="state" label="状态">
          <template slot-scope="scope">{{ scope.row.state === 1 ? '已启用':'已禁用' }}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 点击预览 -->
            <article-preview class="articlepreview preview" :scoperow="scope.row"></article-preview>

            <el-button type="text" @click="changeState(scope.row)">
              <template>{{scope.row.state === 1 ? '禁用':'启用'}}</template>
            </el-button>
            <el-button
              type="text"
              :disabled="scope.row.state === 1"
              @click="editarticle(scope.row)"
            >修改</el-button>
            <el-button
              type="text"
              :disabled="scope.row.state === 1"
              @click="removeById(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="articlequery.page"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="articlequery.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>

      <!-- 修改文章弹框 -->
      <!-- <article-edit :editDialogTableVisible="editDialogTableVisible"></article-edit> -->
      <el-dialog title="修改文章" :visible.sync="editDialogTableVisible">
        <el-form
          :model="editArticleForm"
          :rules="addArticleFormRules"
          ref="editArticleFormRef"
          label-width="100px"
        >
          <el-form-item label="文章标题" prop="title">
            <el-input v-model="editArticleForm.title" placeholder="请输入文章标题"></el-input>
          </el-form-item>
          <el-form-item label="文章内容" prop="articleBody">
            <quill-editor v-model="editArticleForm.articleBody" ref="myQuillEditor"></quill-editor>
          </el-form-item>
          <el-form-item prop="videoURL" label="视频地址">
            <el-input v-model="editArticleForm.videoURL" placeholder="请输入视频地址"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogTableVisible = false">取 消</el-button>
          <el-button type="primary" @click="editsure">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 添加文章弹框 -->
      <article-add
        :addDialogTableVisible="addDialogTableVisible"
        @closedialog="addDialogTableVisible=false"
        @getlist="getArticleList()"
      ></article-add>

      <!-- 点几按钮播放视频 -->
      <el-dialog
        :show-close="false"
        class="chenyundiao"
        :visible.sync="videoDialogVisible"
        width="800px"
      >
        <template>
          <i class="el-icon-error chenyunicon" @click="videoDialogVisible=false"></i>
          <video class="videos" :src="videoURL" autoplay></video>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { list, remove, add, update, changeState } from "@/api/hmmm/articles"// 引入接口
import { parseTime } from "@/utils/index.js" // 时间处理
import articlePreview from '../components/articles-preview' // 预览文章的的组件
import ArticleAdd from '../components/articles-add' // 添加与修改的文章组件
export default {
  data() {
    return {
      // 状态栏
      options: [{
        value: '选项1',
        label: '1'
      }, {
        value: '选项2',
        label: '0'
      }],
      articlequery: {
        query: '',
        page: 1,// 当前的页数 
        pagesize: 10,// 当前每页显示多少条数据
        keyword: null, // 关键字
        state: null // 状态
      },
      tableData: [],
      value: '',
      // 控制预览弹出框的线束与隐藏
      dialogVisible: false,
      // 总的数据条数
      total: 0,
      // 修改文章数据
      editArticleForm: {
        title: '',
        articleBody: '',
        videoURL: '',
        id: null
      },
      // 富文本编辑器验证规则
      addArticleFormRules: {
        title: [{ required: true, message: '请输入活动名称', trigger: 'blur' },
        { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }],
        articleBody: [{ required: true, message: '请输入活动名称', trigger: 'blur' },
        { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }],
        videoURL: [{ required: false, message: '请输入活动名称', trigger: 'blur' }]
      },
      // 富文本编辑器弹出框
      addDialogTableVisible: false,
      //修改富文本编辑器
      editDialogTableVisible: false,
      videoDialogVisible: false,
      videoURL: '',
    }
  },
  components: {
    // 预览的组件
    articlePreview,
    ArticleAdd
  },
  created() {
    // 获取列表
    this.getArticleList()
  },
  methods: {
    // 获取文章列表
    async getArticleList() {
      const data = await list(this.articlequery)

      if (data.request.status !== 200) {
        return this.$message.error('获取文章列表失败，请重新获取')
      }
      this.tableData = data.data.items
      this.total = data.data.counts
    },
    // 监听 pagesize 改变的事件
    handleSizeChange(newSize) {
      this.articlequery.pagesize = newSize
      this.getArticleList()
    },
    handleCurrentChange(newPage) {
      this.articlequery.page = newPage
      this.getArticleList()
    },
    // 清除
    clearlist() {
      this.articlequery= {
        query: '',
        page: 1,// 当前的页数 
        pagesize: 10,// 当前每页显示多少条数据
        keyword: null, // 关键字
        state: null // 状态
      }
      // this.articlequery.state = ''
      // this.articlequery.keyword = ''
      this.getArticleList()
    },
    // 点击修改文章
    editarticle(data) {
      this.editArticleForm.title = data.title
      this.editArticleForm.articleBody = data.articleBody
      this.editArticleForm.videoURL = data.videoURL
      this.editArticleForm.id = data.id
      this.editDialogTableVisible = true

    },
    // 点击确定按钮修改文章
    editsure() {
      this.$refs.editArticleFormRef.validate(async valid => {
        if (!valid) return
        const data = await update(
          this.editArticleForm
        )
        this.editDialogTableVisible = false
        this.$message.success('修改文章成功')
        this.getArticleList()
      })
    },
    // 根据ID删除文章
    async removeById(id) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该商品, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).catch((err) => err)
      if (confirmResult !== 'confirm') {
        return this.$message.error('取消删除')
      }
      const { data } = await remove(id)
      this.$message.success('删除成功')
      this.getArticleList()
    },
    // 监听启用禁用按钮状态的改变
    async changeState(row) {
      let status = ''
      let state = null
      if (row.state === 1) {
        state = 0
        status = '禁止'
      } else {
        state = 1
        status = '启用'
      }
      const data = await changeState({ id: row.id, state })
      this.getArticleList()
    },
    // 播放视频
    handleVideo(val) {
      this.videoURL = val
      this.videoDialogVisible = true
    }
  },
  // 事件过滤器
  filters: {
    formdate(time) {
      return parseTime(time)
    }
  }
}

</script>

<style scoped lang='less'>
.container {
  .header {
    margin-bottom: 10px;
    .keyword {
      font-size: 30px;
      margin-left: 40px;
    }
    .status {
      margin-left: 40px;
    }
    .addskill {
      margin-left: 810px;
    }
    .count {
      margin-top: 5px;
    }
  }
}
.articlepreview {
  display: inline-block;
}
/deep/.ql-editor {
  height: 200px;
}
.el-icon-film {
  margin-left: 10px;
  font-size: 20px;
  color: #409eff;
}
.preview {
  color: #409eff;
  margin-right: 10px;
}
.page {
  text-align: right;
}
.chenyundiao {
  /deep/.el-dialog {
    background-color: transparent;
    // width: 57%!important;
  }
  /deep/.el-dialog__header {
    padding: 0;
  }
  /deep/.el-dialog__body {
    padding: 0;
    width: 800px;
    top: 0;
  }
  video {
    width: 100%;
    height: 100%;
  }
  .chenyunicon {
    position: absolute;
    top: -22%;
    left: 45%;
    font-size: 50px;
  }
}
</style>
